<template>
    <view class="user-agreement-container">
        <!-- 内容区域 -->
        <scroll-view class="content" scroll-y>
            <view class="section">
                <view class="section-title">欢迎使用互成一家</view>
                <view class="section-content">
                    <text
                        class="paragraph">欢迎您使用"互成一家"小程序（以下简称"本小程序"）。在您使用本小程序之前，请您仔细阅读本用户协议（以下简称"本协议"）。本协议是您与本小程序运营方（以下简称"我们"）之间关于您使用本小程序服务所订立的协议。</text>
                    <text
                        class="paragraph">当您点击"同意"或使用本小程序时，即表示您已充分阅读、理解并接受本协议的全部内容，并与我们达成协议。如您不同意本协议的任何内容，请勿注册或使用本小程序。</text>
                </view>
            </view>

            <view class="section">
                <view class="section-title">账号注册与使用</view>
                <view class="section-content">
                    <text class="paragraph">1. 您在使用本小程序时，需要通过微信账号进行授权登录。您应当保证您提供的所有注册信息的真实性、完整性和准确性。</text>
                    <text class="paragraph">2. 您应妥善保管您的账号信息，因您个人原因导致账号被他人使用而产生的后果由您自行承担。</text>
                    <text class="paragraph">3. 如发现有他人冒用或盗用您的账号，请立即通知我们。</text>
                    <text class="paragraph">4. 我们有权根据实际情况，在必要时对您的账号采取限制措施，包括但不限于暂停或终止您的账号使用权限。</text>
                </view>
            </view>

            <view class="section">
                <view class="section-title">用户行为规范</view>
                <view class="section-content">
                    <text class="paragraph">在使用本小程序的过程中，您必须遵守以下行为规范：</text>
                    <view class="list-item">1. 遵守中华人民共和国相关法律法规；</view>
                    <view class="list-item">2. 不得发布、传播违法、违规、违反社会公德的信息；</view>
                    <view class="list-item">3. 不得侵犯他人的知识产权、隐私权等合法权益；</view>
                    <view class="list-item">4. 不得利用本小程序从事任何可能对互联网正常运行造成不利影响的行为；</view>
                    <view class="list-item">5. 不得利用本小程序进行任何商业营销行为，除非获得我们的书面许可；</view>
                    <view class="list-item">6. 不得利用本小程序发布、传播垃圾信息或进行电子骚扰；</view>
                    <view class="list-item">7. 不得从事其他违反本协议的行为。</view>
                </view>
            </view>

            <view class="section">
                <view class="section-title">知识产权</view>
                <view class="section-content">
                    <text class="paragraph">1. 本小程序的所有权、运营权和知识产权归我们所有。</text>
                    <text class="paragraph">2. 未经我们事先书面同意，您不得以任何方式复制、传播、展示、镜像、上传、下载、修改、出租、出售本小程序的任何内容。</text>
                    <text class="paragraph">3.
                        您在本小程序上发布的内容，您保留相应的知识产权。但您同意授予我们一项全球性、免费、非独占、可转让的许可，允许我们使用、复制、修改、创作衍生作品、传播、出版您发布的内容，以用于提供和推广本小程序服务。</text>
                </view>
            </view>

            <view class="section">
                <view class="section-title">免责声明</view>
                <view class="section-content">
                    <text class="paragraph">1. 我们不对用户发布的内容进行事先审查，但我们有权依法对用户发布的涉嫌违法或违反本协议的内容进行处理。</text>
                    <text class="paragraph">2. 对于因网络状况、通讯线路、第三方网站或管理部门的要求等任何原因而导致您不能正常使用本小程序，我们不承担任何责任。</text>
                    <text class="paragraph">3. 您理解并同意，在使用本小程序过程中可能存在来自其他用户的错误信息，您应自行判断信息的真实性并承担相应风险。</text>
                </view>
            </view>

            <view class="section">
                <view class="section-title">协议修改</view>
                <view class="section-content">
                    <text
                        class="paragraph">我们保留在必要时修改本协议的权利。如本协议有任何变更，我们将在本小程序上公布修改后的协议内容。如您继续使用本小程序，则视为您接受修改后的协议。如您不同意修改后的协议，您应当停止使用本小程序。</text>
                </view>
            </view>

            <view class="section">
                <view class="section-title">法律适用与争议解决</view>
                <view class="section-content">
                    <text class="paragraph">1. 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</text>
                    <text class="paragraph">2. 如双方就本协议内容或执行发生争议，应友好协商解决；协商不成时，任何一方均可向我们所在地有管辖权的人民法院提起诉讼。</text>
                </view>
            </view>

            <view class="section">
                <view class="section-title">联系我们</view>
                <view class="section-content">
                    <text class="paragraph">如您对本协议有任何疑问或建议，请通过以下方式与我们联系：</text>
                    <view class="contact-info">
                        <view>电子邮件：service@whofamily.com</view>
                        <view>联系电话：17727316901</view>
                        <view>联系地址：佛山市南海区信息大道中互成一家传媒公司</view>
                    </view>
                </view>
            </view>

            <view class="footer">
                <text>本用户协议更新日期：2025年4月22日</text>
                <br />
                <text>生效日期：2025年4月22日</text>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
const handleBack = () => {
    uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.user-agreement-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f9fa;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 12vw;
    padding: 0 4vw;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;

    .back-icon {
        width: 8vw;
        height: 8vw;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
            font-size: 5vw;
            color: #333;
        }
    }

    .title {
        font-size: 4.5vw;
        font-weight: 500;
        color: #333;
    }

    .placeholder {
        width: 8vw;
    }
}

.content {
    flex: 1;
    padding: 4vw;
    box-sizing: border-box;
}

.section {
    margin-bottom: 6vw;
    background-color: #fff;
    border-radius: 3vw;
    padding: 4vw;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    .section-title {
        font-size: 4.5vw;
        font-weight: 600;
        color: #333;
        margin-bottom: 3vw;
        position: relative;
        padding-left: 3vw;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1vw;
            height: 4vw;
            background-color: #3498db;
            border-radius: 0.5vw;
        }
    }

    .section-content {
        color: #666;
        font-size: 3.8vw;
        line-height: 1.6;
    }

    .paragraph {
        display: block;
        margin-bottom: 2vw;
    }

    .list-item {
        margin-bottom: 2vw;
        padding-left: 2vw;
    }

    .contact-info {
        margin-top: 2vw;
        padding: 3vw;
        background-color: #f8f9fa;
        border-radius: 2vw;
        font-size: 3.6vw;
        line-height: 1.8;
    }
}

.footer {
    text-align: center;
    padding: 4vw 0;
    color: #999;
    font-size: 3.2vw;
    line-height: 1.6;
}
</style>